
<template>
  <div class="base-info" v-show="Object.keys(goods).length">
    <p class="base-info-title">{{goods.title}}</p>
    <div class="base-info-price">
      <span class="n-price">{{goods.newPrice}}</span>
      <span class="o-price">{{goods.oldPrice}}</span>
      <span class="discount">{{goods.discount}}</span>
    </div>
    <div class="base-info-other">
      <span>{{ columns[0]}}</span>
      <span>{{ columns[1]}}</span>
      <span>{{ name}}</span>
    </div>
    <div class="base-info-services">
      <div class="services-item" v-for=" i in len" :key="i">
        <img :src="services[i-1].icon" v-show="services[i-1].icon" />
        <span>{{services[i-1].name}}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    goods: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      services: [],
      len: 0,
      columns: [],
      name: ''
    }
  },

  watch: {
    goods(val) {
      this.columns = val.columns
      this.services = val.services
      this.len = this.services.length - 1
      this.name = this.services[this.len].name
    }
  }
}
</script>

<style scoped>
.base-info {
  padding: 20px 8px 0;
  border-bottom: 5px solid #eee;
  color: #666;
  font-size: 13px;
}
.base-info-title {
  color: #333;
  font-size: 16px;
}
.base-info-price {
  margin: 20px 0;
}
.n-price {
  font-size: 24px;
  color: var(--color-tint);
}
.o-price {
  margin: 0 5px;
  text-decoration: line-through;
}
.discount {
  position: relative;
  padding: 2px 5px;
  border-radius: 15px;
  color: #fff;
  background-color: orangered;
  top: -8px;
}
.base-info-other {
  display: flex;
  justify-content: space-between;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(100, 100, 100, 0.2);
}
.base-info-services {
  display: flex;
  justify-content: space-between;
  line-height: 60px;
}
.base-info-services img {
  width: 12px;
  height: 12px;
  margin-right: 2px;
}
</style>